<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>{{ .metaTitle }}</title>
    <meta
      name="keywords"
      content="{{ .metaKeywords }}"
    />
    <meta
      name="description"
      content="{{ .metaDescription }}"
    />
    <link
      rel="shortcut icon"
      href="/images/favicon.ico"
    />
    <script
      type="module"
      src="/src/main.js"
      defer
    ></script>
    <script>
      const CSGHUB_SERVER = '{{ .csghubServer }}'
      const ON_PREMISE = '{{ .onPremise }}'
      const ENABLE_HTTPS = '{{ .enableHttps }}'
      const THEME = '{{ .theme }}'
      const BUILD_EDITION = "{{.buildEdition }}";
      const REGION = "{{.region }}";
      // baidu statistics
      var _hmt = _hmt || []
      ;(function () {
        var hm = document.createElement('script')
        hm.src = 'https://hm.baidu.com/hm.js?eaab0b4f3a7575ccde35ded2b54d7726'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
    <style lang="less">
      .el-container {
        width: 100%;
        height: 100%;
        :deep(.el-aside) {
          width: auto !important;
          background-color: var(--el-menu-bg-color);
          border-right: 1px solid var(--el-aside-border-color);
          .aside-box {
            display: flex;
            flex-direction: column;
            transition: width 0.3s ease;
            .el-scrollbar {
              height: calc(100% - 55px);
            }
            .el-menu {
              width: 100%;
              overflow-x: hidden;
              border-right: none;
            }
          }
        }
      }

      :root {
        --el-menu-active-color: #3250bd;
        --el-color-primary: #3250bd !important;
        --el-menu-bg-color: transparent;
        --el-menu-item-font-size: 14px;
        --el-menu-text-color: #475467;
        --el-slider-main-bg-color: #3250bd !important;
      }

      .el-input__wrapper,
      .el-select__wrapper {
        border-radius: 8px !important;
        height: 40px;
        line-height: 40px;
      }

      .el-button {
        padding: 10px 16px !important;
        font-size: 12px !important;
        font-weight: 500;
        border-radius: 8px !important;
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
        border: 1px solid var(--Gray-300, #d0d5dd);
        background: var(--Base-White, #fff);
        color: #344054 !important;
        height: auto !important;
        &.confirmBtn,
        &.el-button--primary {
          border: 1px solid #3250bd !important;
          background: #3250bd !important;
          color: var(--Base-White, #fff) !important;
        }
      }

      .bottomBtnGroup .el-button {
        font-size: 14px !important;
      }

      .rounded,
      .rounded-lg,
      .rounded-xl {
        overflow: hidden;
      }

      body::-webkit-scrollbar {
        width: 4px;
        height: 1px;
      }

      ::-webkit-scrollbar {
        opacity: 0 !important;
      }

      .statusBox {
        font-size: 12px;
        border-radius: 16px;
        width: fit-content;
        &.Failed,
        &.Timeout {
          color: #344054;
          border: 1px solid #eaecf0;
          background: #f9fafb;
        }
        &.Finished {
          color: #067647;
          border: 1px solid #abefc6;
          background: #ecfdf3;
        }
        &.Processing {
          color: #223b99;
          border: 1px solid #99afff;
          background: #ced8ff;
        }
        &.Queued {
          color: #363f72;
          border: 1px solid #d5d9eb;
          background: #f8f9fc;
        }
      }

      .mainPage {
        height: calc(100vh - 80px) !important;
        background: #fff;
      }

      .mainCont {
        flex-grow: 1;
        margin: 0;
        .headerCont {
          max-width: 100% !important;
        }
      }
    </style>
  </head>
  <body>
    <div
      id="app"
      class="flex flex-col min-h-screen"
    >
      <div class="grow mainCont">
        {{ template "layouts/navbar.html" . }}
        <div class="flex !h-100vh w-full mainPage page-responsive-width px-5">
          <dataflow-menu></dataflow-menu>
          {{ template "content" .}}
        </div>
      </div>
    </div>
  </body>
</html>
